<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>猜数字游戏</title>
</head>
<body>
  <button id="resetBtn">重新开始一局游戏</button><br>
  <span>要猜的数字：</span>
  <input type="text">
  <button id="guessBtn">猜</button><br>
  <span>结果：</span> <span id="result"></span><br>
  <span>已经猜的次数：</span> <span id="guessCount">0</span>

  <script>
    // 1.先获取上面需要用到的元素
    let resetBtn = document.querySelector('#resetBtn');
    let input = document.querySelector('input');
    let guessBtn = document.querySelector("#guessBtn");
    let resultSpan = document.querySelector('#result');
    let guessCountSpan = document.querySelector('#guessCount');

    // 2.生成一个 1-100 的随机数
    let toGuess =  Math.floor(Math.random()*100) + 1;

    // 3.实现点击 猜 按钮
    guessBtn.onclick = function(){
      if(input.value == null){
        return;
      }
      // 1. 读取到 input 中输入的内容，并转化成整数
      let curNUM = parseInt(input.value);

      // 2.判断大小关系，给出提示
      if((curNUM < toGuess)){
        resultSpan.innerHTML = '低了';
        resultSpan.style.color = 'red';
      }else if(curNUM > toGuess){
        resultSpan.innerHTML = '高了';
        resultSpan.style.color = 'red';

      }else{
        resultSpan.innerHTML = '猜对了';
        resultSpan.style.color = 'green';

      }

      // 3.更新猜的次数
      let guessCount = parseInt(guessCountSpan.innerHTML);
      guessCountSpan.innerHTML = guessCount + 1;   
    }

    // 4. 实现 reset 的操作和逻辑（开始新游戏）
    resetBtn.onclick = function(){
      // 让页面刷新即可
      // location 是和 document 并列关系的对象
      // location 用来控制页面的链接/地址，通过 reload 操作就可以刷新页面
      location.reload();
    }
  </script>
  
</body>
</html>